<template>
  <div class="page-box">
    <scrollMore :showMoreTitle="listData.length > per_page" :noMore="hasMore">
      <div class="joincommunity">
        <div class="cenerbanner">
          <div
            class="banner">
          <img class="banner-img" :src="communityUserInfo.user_background_maps" alt="">
            <!-- 修改封面图 -->
            <div class="upload-img-box" v-if="isUserHome">
              <upload
                ref="uploadRef"
                @sucess="uploadsucess"
                @fileQueued="fileQueued"
                fileName="community"
                :disabled="uploadLoading"
                :maxSize="5">
                <el-button class="buttonbanner click f-j-a-c" :loading="uploadLoading">
                  上传封面图片
                </el-button>
              </upload>
            </div>
          </div>

          <div class="bozhuinfo f-j-sb">
            <!-- 左侧用户信息 -->
            <div class="left f-a-c">
              <div class="img">
                <!-- <img :src="communityUserInfo.user_avatar" alt="" /> -->
                <userAvatar
                  :showDv="communityUserInfo.is_authentication == 1"
                  :userImgs="communityUserInfo.user_avatar"
                  :dvWidht="30"
                  :imgWidth="110"
                  :divWidth="120"
                ></userAvatar>
              </div>
              <div class="info f-d-c">
                <span class="f-a-c"
                  >{{ communityUserInfo.user_name }}

                  <!-- 官方 -->
                  <svg-icon
                    v-if="communityUserInfo.is_official == 1"
                    name="icon-guanfang"
                    style="margin-left: 5px; width: 22px; height: 22px"
                  ></svg-icon>
                  <!-- 等级 -->
                  <span
                    style="
                      background-color: #a1efc1;
                      font-size: 14px;
                      color: #fff;
                      padding: 0 5px;
                      border-radius: 5px;
                      margin-left: 5px;
                    "
                    >Lv {{ communityUserInfo.lv }}</span
                  >
                </span>
                <span class="f-a-c"><svg-icon name="icon-wz"></svg-icon>IP：深圳</span>
                <span class="">{{ communityUserInfo.user_introduce }}</span>
              </div>
            </div>

            <div class="rightitem f-d-c f-j-sb">
              <div class="rightbutton f-a-c" v-if="communityUserInfo && !isUserHome">
                <div
                  class="joinquanzi click f-j-a-c"
                  v-if="communityUserInfo && !communityUserInfo.isFollow"
                  @click="postFollowNow"
                >
                  <svg-icon class="icon" name="gz"></svg-icon> 关注
                </div>
                <div class="guanzhu unfollow click f-j-a-c" v-else @click="postFollowNow">
                  取消关注
                </div>
                <div class="guanzhu click f-j-a-c f-a-c" @click="privateLetter">
                  <svg-icon class="icon" name="sx"></svg-icon> 私信
                </div>
              </div>
              <div v-if="communityUserInfo && isUserHome"></div>

              <!-- 用户关注 粉丝数 -->
              <div class="rightlist f-a-c">
                <div class="right f-a-c" v-for="(item, index) in infoList" :key="index">
                  <div class="itemright f-j-a-c f-d-c">
                    <div class="itemtop">
                      <span>{{
                        index != 2 ? communityUserInfo[item.value] : total
                      }}</span>
                    </div>
                    <div class="itembottom">
                      <span>{{ item.title }}</span>
                    </div>
                  </div>
                  <div class="line" v-if="index != 3"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="all f-a-c">
            <div class="alltop f-d-c">
              <!-- tab栏 -->
              <div class="allleft flex">
                <div class="shaixuan f-a-c">
                  <div
                    class="shaiitem click f-a-c"
                    v-for="(item, index) in alllist"
                    :key="index"
                    @click="alllistClick(item, index)"
                    :class="allCurretn == index ? 'shaiactive' : ''"
                    v-show="isUserHome ? true : !item.isUser"
                  >
                    <span>{{ item.title }} </span>
                    <span>
                      <!-- {{ item.num }} -->
                    </span>
                  </div>
                </div>
              </div>

              <!-- 子级tab栏 -->
              <div class="dongtaibox flex" v-if="alllist[allCurretn].child">
                <span
                  class="f-a-c"
                  v-for="(item, index) in alllist[allCurretn].child"
                  :key="index"
                  @click="pinglunClick(item, index)"
                  :class="pinglunCurrent == index ? 'dongtaiboxactive' : ''"
                  >{{ item.title }}

                  <!-- {{ item.num }} -->
                </span>
              </div>

              <!-- 动态 / 投票 -->
              <div
                class="allbox f-d-c"
                v-if="allCurretnData.type == 'community' || allCurretnData.type == 'vote'"
              >
                <commentList
                  @itemFollowNowUpdate="itemFollowNowUpdate"
                  :list="listData"
                  :marginRight="0"
                ></commentList>
              </div>

              <!-- 圈子 -->
              <communityCircle
                :list="listData"
                v-if="allCurretnData.type == 'circle'"
                :pt="10"
              ></communityCircle>

              <!-- 用户 -->
              <communityUserInfoVue
                :list="listData"
                userKey="user"
                v-if="allCurretnData.type == 'attention'"
                :showFollowBtn="false"
              ></communityUserInfoVue>
            </div>

            <!-- 右侧 -->
            <communityRight
              :Personal="true"
              :hejoin="true"
              :user="true"
              :PersonalData="{ community: total, likeTotal: communityUserInfo.likeTotal }"
            ></communityRight>
          </div>
        </div>

        <div class="moban" v-if="xialaCheck" @click="mobanClick"></div>
      </div>
    </scrollMore>
    <PersonaLletter
      :drawerletter="drawerletter"
      v-if="drawerletter && minToken"
      @closeinfo="closeinfo"
    ></PersonaLletter>
  </div>
</template>

<script>
import PersonaLletter from "@/components/PersonaLletter.vue";

import nodata from "@/components/nodata.vue";
import communityRight from "../views/communityHome/communityRight.vue";
import {
  Mycircle,
  nearlyAndfollows,
  byplateid,
  byUserId,
  postsbyUserId,
  followUser,
  fansUser,
  followNow,
  postsNote,
  userPosts,
  userUpdateInfo,
  addChat,
  getUserChatList,
} from "@/axios/community.js";
import userAvatar from "@/components/userAvatar.vue";

import { ElMessage } from "element-plus";
import upload from "@/components/upload.vue";
import scrollMore from "@/components/scrollMore.vue";
import commentList from "@/components/commentList.vue";
import communityCircle from "@/components/communityCircle.vue";
import communityUserInfoVue from "@/components/communityUserInfo.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  nextTick,
  onBeforeMount,
  watch,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    PersonaLletter,
    communityRight,
    nodata,
    upload,
    scrollMore,
    commentList,
    communityCircle,
    communityUserInfoVue,
    userAvatar,
  },
  setup() {
    let minToken = computed(() => {
      return store.state.minToken;
    });
    let personlist = computed(() => {
      return store.state.personlist;
    });
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      uploadLoading: false, //图片上传loading
      listData: [], //列表数据

      hefoucer: "",
      quanziitemList: [],
      drawerletter: false,

      TAfollow: [
        {
          text: "话题",
          num: 12,
        },
        {
          text: "圈子",
          num: 12,
        },
      ],
      foucebox: [], // 关注
      fanse: [], // 粉丝

      xialaCheck: false,
      pinglun: [],

      allCurretnData: "", //tab选中项
      allCurretn: 0, //tab切换下标
      pinglunCurrent: 0, //tab子tab栏切换下标
      alllist: [
        {
          title: "动态",
          num: 0,
          type: "community",
        },
        {
          title: "投票 ",
          num: 0,
          type: "vote",
          isUser: true,
        },

        {
          title: "关注 ",
          num: 0,
          type: "attention",
          child: [
            {
              title: "关注",
              num: 0,
            },
            {
              title: "粉丝",
              num: 0,
            },
          ],
        },
        {
          title: "我的圈子",
          num: 0,
          type: "circle",
          isUser: true,
          child: [
            {
              title: "创建的圈子",
              num: 0,
            },
            {
              title: "关注的圈子",
              num: 0,
            },
          ],
        },
      ], //

      infoList: [
        {
          title: "关注",
          value: "followTotal",
        },
        {
          title: "粉丝",
          value: "fansTotal",
        },
        {
          title: "笔记",
          value: "",
        },
        {
          title: "获赞",
          value: "likeTotal",
        },
      ],
      total: 0, //笔记总数

      TAfollowClickCurrent: -1,
      ids: 0,
      communityUserInfo: "",
      fansTotal: 0,
      MycircleTotal: 0,
      user_id: "",
      list: {
        fansUserList: [],
        followUserList: [],
        fansUserTotal: 0,
        followUserTotal: 0,
        listAll: [],
      },

      page: 1, //分页
      hasMore: true, //是否还有下一页
      per_page: 0, //每页的数量
      isMounte:false,//是否挂在
    });

    // 当前登录用户信息
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });

    // 是否为自己主页
    let isUserHome = computed(() => {
      if (userInfo.value) {
        return userInfo.value.id == data.communityUserInfo.id;
      } else {
        return false;
      }
    });

    watch(()=>router.currentRoute.value.query.id,(newVal,oldVal)=>{
      if(newVal && data.isMounte) {
        router.go(0)
      }
    });

    // 背景图片上传前
    let fileQueued = (file) => {
      data.uploadLoading = true;
    };

    // 背景图片上传成功
    let uploadsucess = (obj) => {
      let {
        gender,
        user_avatar,
        // user_background_maps,
        user_birthday,
        user_introduce,
        user_labels,
        user_name,
      } = userInfo.value;
      userUpdateInfo({
        gender,
        user_avatar,
        user_birthday,
        user_introduce,
        user_labels,
        user_name,
        user_background_maps: obj.url,
        user_id: 0,
      })
        .then((res) => {
          data.uploadLoading = false;
          ElMessage.success("上传成功");
          getbyUserId();
        })
        .catch((err) => {
          data.uploadLoading = false;
        });
    };

    // 处理接口返回结果
    let setAjaxResult = (res) => {
      let resultData = res.data;
      data.noMore = resultData.data.length < resultData.per_page;
      data.per_page = resultData.per_page;
      data.listData = [...data.listData, ...resultData.data];
    };

    // 通过用户id获取用户笔记
    let getpostsbyUserId = () => {
      let fn = isUserHome.value ? postsNote : postsbyUserId;
      let url = isUserHome.value
        ? `?page=${data.page}&type=0`
        : `?page=${data.page}&user_id=${data.user_id}`;
      fn({ id: url }).then((res) => {
        data.total = res.data.total;
        setAjaxResult(res);
      });
    };

    // 获取关注列表 (粉丝/关注)
    let getAttention = () => {
      let id = `?user_id=${data.user_id}&page=${data.page}`;
      let fn = data.pinglunCurrent == 0 ? followUser : fansUser;
      fn({ id }).then((res) => {
        res.data.data = res.data.data.filter((item) => item.user);
        setAjaxResult(res);
      });
    };

    // 获取圈子列表
    let getCircle = () => {
      let fn = data.pinglunCurrent == 0 ? Mycircle : nearlyAndfollows;
      fn().then((res) => {
        let resultList = data.pinglunCurrent == 0 ? res.data : res.data.follow;
        resultList.forEach((item) => {
          if (data.pinglunCurrent == 1) {
            item.is_follow_circle = true;
          } else {
            item.is_created = true;
          }
        });
        data.listData = resultList;
      });
    };
    // 关闭消息弹窗
    let closeinfo = () => {
      enableScroll();

      data.drawer = false;
      data.drawerletter = false;
    };
    // 滚动加载
    let moreGetData = (more) => {
      if (more) {
        data.page += 1;
      } else {
        data.page = 1;
        data.per_page = 0;
        data.hasMore = true;
        data.listData = [];
      }

      // 获取笔记
      if (data.allCurretnData.type === "community") {
        getpostsbyUserId();
      }

      // 获取投票
      if (data.allCurretnData.type === "vote") {
        getUserPosts(4);
      }

      // 关注
      if (data.allCurretnData.type === "attention") {
        getAttention();
      }

      // 圈子
      if (data.allCurretnData.type === "circle") {
        getCircle();
      }
    };

    //tab切换
    let alllistClick = (item, index) => {
      if (data.allCurretn === index) return;
      data.allCurretn = index;
      data.pinglunCurrent = 0;
      data.allCurretnData = item;
      moreGetData();
    };

    // 二级tab切换
    let pinglunClick = (item, index) => {
      if (data.pinglunCurrent === index) return;
      data.pinglunCurrent = index;
      moreGetData();
    };

    // 获取用户相关帖子数据
    let getUserPosts = (type) => {
      userPosts({
        type: type,
        limit: 10,
        page: data.page,
      }).then((res) => {
        setAjaxResult(res);
      });
    };

    onMounted(() => {
      proxy.$nextTick(() => {
        setTimeout(() => {
          data.isMounte = true;
          updateData();
        }, 0);
      });
    });

    // 更新页面信息
    let updateData = () => {
      data.user_id = router.currentRoute._value.query.id; // 用户id
      data.allCurretnData = data.alllist[0]; //默认选中tab
      data.allCurretn = 0;
      data.pinglunCurrent = 0;
      getbyUserId(); // 用户信息 获取
      // moreGetData(); //获取列表
    };

    // 关注/取消关注
    let postFollowNow = () => {
      followNow({
        posts_user_id: data.communityUserInfo.id,
      }).then((res) => {
        data.communityUserInfo.isFollow = !data.communityUserInfo.isFollow;
        ElMessage.success(data.communityUserInfo.isFollow ? "关注成功" : "取消关注");
      });
    };

    // 私信
    let privateLetter = () => {
      if (!data.communityUserInfo.isFollow)
        return ElMessage.warning(
          "因遵守互联网陌生人交友条例，聊天功能仅限关注用户可使用。"
        );
      sendmsg();
    };
    // 发送消息
    let sendmsg = (datas) => {
      if (data.inputData == "" && datas.url == "") {
        return ElMessage.error("请输入发送内容");
      }
      console.log(personlist.value);

      let num = personlist.value.find((item) => item.user.id == data.user_id);
      console.log(num);
      console.log(num == undefined);
      if (num == undefined) {
        console.log(123);
        addChat({
          chat_audio_length: 0,
          chat_audio_url: "",
          chat_content: "你好",
          chat_image: "",
          oid: data.user_id,
        }).then((res) => {
          // return;
          // 获取当前滚动条的位置
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
          var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
          // 使用 CSS 样式禁用滚动条
          document.body.style.overflow = "hidden";
          data.drawerletter = true;
          getUserChatLists();
        });
      } else {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
        // 使用 CSS 样式禁用滚动条
        document.body.style.overflow = "hidden";
        data.drawerletter = true;
        return;
      }
    };
    // 获取用户数据
    let getbyUserId = () => {
      let id = "?user_id=" + data.user_id;
      byUserId({ id }).then((res) => {
        data.communityUserInfo = res.data;
        moreGetData();
      });
    };
    // 消息列表
    let getUserChatLists = () => {
      getUserChatList().then((res) => {
        store.commit("setPersonlist", res.data);
      });
    };
    // 蒙版点击
    let mobanClick = () => {
      data.xialaCheck = false;
    };
    let enableScroll = () => {
      // console.log("进入");
      // 恢复滚动条位置
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
      // 移除 CSS 样式
      document.body.style.overflow = null;
      document.body.style.position = null;
      document.body.style.top = null;
      document.body.style.left = null;
      // 恢复滚动条位置
      window.scrollTo(scrollLeft, scrollTop);
    };

    // 动态列表关注回调
    let itemFollowNowUpdate = (obj) => {
      // console.log(obj)
      if (obj.id == data.communityUserInfo.id) {
        data.communityUserInfo.isFollow = obj.is_follow_user;
      }
    };

    return {
      itemFollowNowUpdate,
      getUserChatLists,
      personlist,
      enableScroll,
      closeinfo,
      minToken,
      sendmsg,
      fileQueued,
      uploadsucess,
      isUserHome,
      userInfo,
      privateLetter,
      postFollowNow,
      getUserPosts,
      postsNote,

      // getfansUser,
      // getfollowUser,
      getpostsbyUserId,
      // myCreatequanzi,
      // getfouct,
      mobanClick,
      pinglunClick,
      alllistClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.page-box {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
}

.joincommunity {
  height: 100%;
  max-width: 1360px;
  min-width: 1110px;
  margin: 0 auto;
  .cenerbanner {
    border-radius: 20px;
    background-color: #f9f9f9;
    // height: 800px;
    width: 100%;
    margin-top: 10px;
    .banner {
      position: relative;
      border-radius: 20px 20px 0 0;
      // background-image: url("../../../assets/image/banner-bj.jpg");
      height: 300px;
      // background-repeat: no-repeat;
      width: 100%;
      background-size: cover;

      .banner-img{
        width:100%;
        height:100%;
        object-fit:cover;
      border-radius: 20px 20px 0 0;

      }

      .upload-img-box {
        position: absolute;
        bottom: 20px;
        right: 20px;
      }
      .buttonbanner {
        background: #ffffff;
        width: 130px;
        height: 38px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #ffffff;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #64c8dc;
      }
    }
    .bozhuinfo {
      background-color: #fff;
      padding: 20px 30px 30px;
      .left {
        .img {
          margin-top: -70px;
          z-index: 2;
          width: 120px;
          height: 120px;
          > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }
        }
        .info {
          margin-left: 20px;
          > span {
            &:first-child {
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: 700;
              color: #000000;
            }
            &:nth-child(2) {
              margin-top: 10px;
              font-size: 12px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #656f79;
            }
            &:last-child {
              margin-top: 10px;
              font-size: 12px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #656f79;
              display: block;
              max-width: 500px;
              word-wrap: break-word;
            }
          }
        }
      }

      .right {
        .itemright {
          .itemtop {
            > span {
              font-size: 14px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: 700;
              color: #000000;
            }
          }
        }
        .itembottom {
          > span {
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
        }
        .line {
          margin: 0 23px;
          width: 1px;
          height: 23px;
          background-color: #ececec;
        }
      }

      .rightbutton {
        justify-content: flex-end;
        margin-bottom: 20px;
        // padding-top: 10px;
        > div {
          margin-left: 10px;
          .icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
        }
      }
      .joinquanzi {
        width: 80px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
      }

      .guanzhu {
        width: 80px;
        height: 34px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #64c8dc;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #64c8dc;
      }
      .unfollow {
        border-color: #ececec;
        color: #000000;
      }
    }
    .all {
      align-items: flex-start;
      margin-top: 10px;
      padding-bottom: 30px;
      .alltop {
        flex: 1;
      }
      .allleft {
        padding: 20px 40px;
        margin-right: 10px;
        background-color: #fff;
        .shaixuan {
          .shaiitem {
            border-bottom: 1px solid #f5f6f7;
            margin-right: 110px;
            > span {
              &:first-child {
                font-size: 16px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #656f79;
              }
              &:last-child {
                font-size: 12px;
                color: #656f79;
                margin-left: 5px;
              }
            }
          }

          .shaiactive {
            > span {
              color: #64c8dc !important;
            }
          }
        }
      }
      .dongtaibox {
        padding: 20px;
        margin-top: 1px;
        height: 58px;
        background-color: #fff;
        margin-right: 10px;
        > span {
          cursor: pointer;
          margin-left: 40px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
          &:first-child {
            margin-left: 0;
          }
        }
        .dongtaiboxactive {
          color: #000 !important;
        }
      }
      .allbox {
        margin-right: 10px;
        padding: 10px 0;
        // flex-wrap: wrap;
        // display: grid;
        // grid-template-columns: repeat(auto-fill, 100%);
        // grid-gap: 6px;
        .boxitem {
          padding: 20px;
          padding-bottom: 30px;
          width: 100%;
          background: #ffffff;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          .boxtop {
            align-items: flex-start;
            .boxlef {
              width: 54px;
              height: 54px;
              > img {
                border-radius: 50%;
                width: 100%;
                height: 100%;
              }
            }
            .boxinfo {
              margin-left: 20px;
              .infoitem {
                > span {
                  font-size: 16px;
                  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                  font-weight: 700;
                  color: #000000;
                }
              }
              .infocontent {
                margin-top: 8px;
                > span {
                  font-size: 14px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                  color: #000000;
                  &:last-child {
                    margin-left: 30px;
                  }
                }
              }
            }
            .guanzhu {
              width: 60px;
              height: 26px;
              background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
              border-radius: 6px 6px 6px 6px;
              opacity: 1;
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
            }
            .noguanzhu {
              width: 60px;
              height: 26px;
              border-radius: 6px 6px 6px 6px;
              opacity: 1;
              border: 1px solid #ececec;
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #000;
            }
          }
          .boxcontent {
            margin-left: 72px;
            font-size: 14px;
            line-height: 40px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
            height: 40px;
          }
          .boxcontentbox {
            border-radius: 10px;
            padding: 0 20px;

            height: 54px;
            margin-left: 72px;
            background: #f3f4f5;
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
          .dizhi {
            margin-top: 4px;
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
            > span {
              font-size: 12px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #656f79;
            }
          }
        }
      }
    }
  }
}
.toupiao {
  .toupiaocontent {
    margin-left: 71px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
  .demo-progress {
    margin-left: 71px;
  }
  .demo-progress {
    .progressitem {
      background-color: #fff;
      position: relative;
      margin-top: 10px;
      padding: 0 20px;
      width: 682px;
      height: 32px;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: 1px solid #ececec;
      .box {
        position: relative;
        z-index: 1;
        > span {
          margin-right: 10px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #000000;
        }
      }
      .shuzi {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
      .progressitemactice {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
      }
      .noprocess {
        background-color: #f5f6f7;
      }
      .secleeprocesss {
        background-color: #ecf8fa;
      }
    }
  }
  .zonggong {
    margin-left: 71px;
    margin-top: 10px;
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
}
.allboxs {
  padding: 10px 0;
  // flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(auto-fill, 32.6%);
  grid-gap: 6px;
  .boxitems {
    padding: 20px;
    width: 100%;
    height: 154px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    .boxtops {
      align-items: flex-start;
      .boxlefs {
        width: 54px;
        height: 54px;
        > img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
      .boxinfos {
        margin-left: 10px;
        .infoitems {
          > span {
            font-size: 16px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: 700;
            color: #000000;
          }
        }
        .infocontents {
          margin-top: 8px;
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            &:last-child {
              margin-left: 30px;
            }
          }
        }
      }
      .guanzhus {
        width: 60px;
        height: 26px;
        background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
      }
      .noguanzhus {
        width: 60px;
        height: 26px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #ececec;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000;
      }
    }
    .boxcontents {
      margin-top: 20px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
      height: 40px;
    }
  }
}
.xiala {
  position: relative;
  .xialabox {
    position: absolute;
    top: 0;
    width: 200px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    opacity: 1;
    left: -59px;
    z-index: 12;
    background: #ffffff;

    .xialaitem {
      background: #ffffff;
      padding: 0 10px;

      width: 100%;
      height: 40px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
      &:hover {
        background-color: #eff9fb;
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #64c8dc;
        }
      }
    }
  }
}

.huatiitem {
  padding: 20px;
  background-color: #fff;
  .huatiitembox {
    height: 100px;
    border-bottom: 1px solid #f5f6f7;
    > img {
      margin-right: 20px;
      width: 60px;
      height: 60px;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
    }
    .huatinong {
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      .huatiinfo {
        margin-top: 10px;
        > span {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
          &:last-child {
          }
        }
      }
    }
  }
}
.quanzi {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 32.6%);
  grid-gap: 6px;
  .quanziitem {
    border-radius: 20px;
    width: 100%;
    height: 361px;
    background-color: #fff;
    .topquanzi {
      > img {
        border-radius: 20px 20px 0 0;
        width: 100%;
        height: 150px;
      }
    }
    .touxiang {
      margin-top: -30px;
      > img {
        border-radius: 50%;
        width: 60px;
        height: 60px;
      }
    }
    .quanzititle {
      margin-top: 10px;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
    }
    .bijiitem {
      margin: 0 auto;
      margin-top: 20px;
      width: 180px;
      .bijispan {
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #000000;
          &:last-child {
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
        }
      }
    }
    .bijibutton {
      width: 220px;
      height: 40px;
      background: #f3f4f5;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      margin: 0 auto;
      margin-top: 30px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #656f79;
      }
    }
  }
  .line {
    width: 1px;
    height: 15px;

    background-color: #ececec;
  }
}
.moban {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100vw;
  height: 100vh;
}
</style>
